<template>
    <div class="flex flex-wrap gap-4 items-center">
        <el-select v-model="value" placeholder="Select" size="large" style="width: 240px; height: 200px;" v-infinite-scroll="handleScroll"
        :loading="isLoading">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const value = ref('')
const isLoading = ref(false);
const options = ref<any>([])

onMounted(() => {
    for(let i = 0; i < 30; i++) {
        options.value.push({value: `option${i}`, label: `option${i}`})
    }
})

const handleScroll = (event:any) => {
  const target = event.target;
  if (target.scrollHeight - target.scrollTop <= target.clientHeight) {
    loadMoreOptions();
  }
};

const loadMoreOptions = () => {
    options.value.push({value: `option31`, label: `option31`})
}
</script>

<style scoped></style>